import QtQuick 2.3
import "qrc:///content"
import "qrc:///Constants.js" as Constants

Rectangle
{
    // Identifier of the item
    id: registerUser

    // common properties

    //
    anchors.fill: parent
    color: Constants.backgroundColor

    // Testing purpose (Design)
    width: 500
    height: 500

    // caption
    Caption
    {
        id: caption
        label: "Register"
    }

    TextInput2
    {
        id: textInputUser
        focus: true
        anchors.top: caption.bottom
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.horizontalCenter: parent.horizontalCenter
        placeHolder: "Username"
    }

    TextInput2
    {
        id: textInputPassword
        anchors.top: textInputUser.bottom
        anchors.topMargin: 1
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.horizontalCenter: parent.horizontalCenter
        placeHolder: "Password"
        echoMode: TextInput.Password
    }

    TextInput2
    {
        id: textInputPasswordAgain
        anchors.top: textInputPassword.bottom
        anchors.topMargin: 1
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.horizontalCenter: parent.horizontalCenter
        placeHolder: "Password again"
        echoMode: TextInput.Password
    }

    TextInput2
    {
        id: textInputEmail
        anchors.top: textInputPasswordAgain.bottom
        anchors.topMargin: 1
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.horizontalCenter: parent.horizontalCenter
        placeHolder: "Email"
    }

    // Login
    Button
    {
        id: loginButton
        anchors.top: textInputEmail.bottom
        anchors.topMargin: 15
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.horizontalCenter: parent.horizontalCenter
        label: "Login"
        onClicked: loginClicked()
    }

    // signals
    signal loginClicked()
    onLoginClicked: { console.log("Login") }

    // functions
    function showView(show)
    {
        textInputUser.value = ""
        textInputPassword.value = ""
        textInputPasswordAgain.value = ""
        textInputEmail.value = ""

        registerUser.state = show? "" : "hide"
        loginButton.disabled = !show
    }

    // states
    states:
    [
    State
    {
        name: "hide"
        PropertyChanges
        {
            target: registerUser
            opacity: 0.0
        }
    }
    ]

    // transitions
    transitions: Transition
    {
        NumberAnimation
        {
            properties: "opacity"
            duration: 500
        }
    }
}
